<template>
  <div class="travel-container">
    <!-- 顶部大搜索框 -->
    <div class="main-search">
      <div class="search-box">
        <input
            type="text"
            v-model="searchParams.keyword"
            placeholder="请输入目的地、景点、产品名称等"
            @keyup.enter="handleSearch"
        >
        <button @click="handleSearch">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <path fill="currentColor" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505 6.505 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
          </svg>
          搜索
        </button>
      </div>
    </div>

    <!-- 筛选条件区域 -->
    <div class="filter-section">
      <div class="filter-group">
        <span class="filter-label">旅行方式</span>
        <el-radio-group @change="handleSearch" v-model="searchParams.travelType">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="跟团游">跟团游</el-radio-button>
          <el-radio-button label="私家团">私家团</el-radio-button>
        </el-radio-group>
      </div>

      <div class="filter-group">
        <span class="filter-label">产品线级</span>
        <el-radio-group @change="handleSearch" v-model="searchParams.level">
          <el-radio-button label="">全部</el-radio-button>
          <el-radio-button label="1">1钻</el-radio-button>
          <el-radio-button label="2">2钻</el-radio-button>
          <el-radio-button label="3">3钻</el-radio-button>
          <el-radio-button label="4">4钻</el-radio-button>
          <el-radio-button label="5">5钻</el-radio-button>
        </el-radio-group>
      </div>

      <div class="filter-group">
        <span class="filter-label">价格范围</span>
        <el-input-number v-model="searchParams.minPrice" :min="0" :controls="false" placeholder="最低价"/>
        <span class="price-separator">-</span>
        <el-input-number v-model="searchParams.maxPrice" :min="0" :controls="false" placeholder="最高价"/>
      </div>

      <div class="filter-group sort-group">
        <span class="filter-label">推荐排序</span>
        <el-radio-group @change="handleSearch" v-model="searchParams.sortType">
          <el-radio-button label="">默认排序</el-radio-button>
          <el-radio-button label="score">好评优先</el-radio-button>
          <el-radio-button label="level">级别优先</el-radio-button>
          <el-radio-button label="priceAsc">价格从低到高</el-radio-button>
          <el-radio-button label="priceDesc">价格从高到低</el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <!-- 产品列表 -->
    <div class="product-list">
      <el-card
          v-for="product in products"
          :key="product.id"
          shadow="hover"
          class="product-card"
          @click="detail(product.id)"
      >
        <div class="product-content">
          <!-- 图片展示区域 -->
          <div class="image-container">
            <el-carousel
                v-if="product.img"
                :interval="4000"
                indicator-position="outside"
                height="200px"
            >
              <el-carousel-item>
                <el-image
                    :src="product.img"
                    fit="cover"
                    class="product-image"
                    :preview-src-list="product.img"
                    hide-on-click-modal
                >
                  <template #error>
                    <div class="image-error">
                      <el-icon><Picture /></el-icon>
                      <span>图片加载失败</span>
                    </div>
                  </template>
                </el-image>
              </el-carousel-item>
            </el-carousel>
          </div>

          <!-- 产品信息 -->
          <!-- 产品信息部分修改如下 -->
          <div class="product-info">
            <div class="product-header">
              <h3 class="main-name" v-html="product.mainName"></h3>
              <p class="sub-name" v-html="product.name"></p>
            </div>

            <div class="product-meta">
              <el-tag :type="getLevelTagType(product.level)" size="large">
                {{ product.level }}钻
              </el-tag>
              <el-tag :type="product.productTypeName == '跟团游' ? 'success' : 'warning'" size="large">
                {{ product.productTypeName }}
              </el-tag>

              <!-- 修改后的评分和销售数据 -->
              <div class="rating-sales">
        <span class="rating">
          <span class="rating-score">{{ product.score }}</span>分
        </span>
                <span class="divider">|</span>
                <span class="sales">已售999+人</span>
                <span class="divider">|</span>
                <span class="reviews">999+条点评</span>
              </div>
            </div>

            <div class="product-desc">
              <el-tag hit style="margin-right: 5px" v-for="tag in product.tags.split(',')">
                {{tag}}
              </el-tag>
            </div>

            <div class="product-footer">
              <div class="price-container">
                <span class="price">¥{{ product.price }}</span>
                <span class="price-label">起/人</span>
              </div>
              <el-button @click="detail(product.id)" type="primary" size="small" class="book-btn">立即预订</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
<!--分页 -->
  <el-pagination
      background
      class="pagination"
      v-model:page-size="searchParams.pageSize"
      v-model:current-page="searchParams.page"
      :total="total"
      @current-change="handleSearch"
      layout="prev, pager, next, jumper"
  />
</template>

<script setup>
import {ref, computed, onMounted} from 'vue';
import {  Picture } from '@element-plus/icons-vue';
import axios from "axios";
import {useRouter} from "vue-router";
let router = useRouter()
// 搜索参数
const searchParams = ref({
  keyword:'', // 搜索框
  travelType: '', // 旅行方式
  level: '',      // 产品线级别（单选）
  minPrice: null, // 最低价格
  maxPrice: null, // 最高价格
  sortType: '', // 排序方式
  page:1, pageSize: 10, // 每页显示的记录数
});
// 产品数据
const products = ref([]);
let total = ref(0);
// 跳转详情页面
let detail = (id)=>{
  router.push('/tuanDetail/'+id )
}

// 处理图片字符串转换为数组
onMounted(()=>{
  handleSearch()
})
// 获取等级对应的标签类型
const getLevelTagType = (level) => {
  const types = ['', 'info', 'danger', 'success', 'primary', 'warning'];
  return types[level] || '';
};

// 搜索处理
const handleSearch = () => {
  axios.post('/grouptravel/search',searchParams.value).then(resp=>{
    products.value = resp.data.data
    total.value = parseInt(resp.data.total)
  })
};
</script>

<style scoped>
:deep(em){
  color: #ff6600 !important; font-style: normal;
}

.travel-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #f7f7f7;
  padding-bottom: 80px;
}

/* 顶部大搜索框样式 */
.main-search {
  margin-bottom: 30px;
  padding: 32px 0 24px 0;
  background-color: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.search-box {
  display: flex;
  max-width: 800px;
  margin: 0 auto;
  box-shadow: 0 2px 8px rgba(255,153,0,0.08);
  border-radius: 8px;
  overflow: hidden;
}

.search-box input {
  flex: 1;
  padding: 16px 18px;
  border: none;
  font-size: 18px;
  outline: none;
  background: #f9f9f9;
  color: #333;
  border-radius: 8px 0 0 8px;
  transition: box-shadow 0.2s;
}

.search-box input::placeholder {
  color: #bbb;
  font-size: 16px;
}

.search-box button {
  padding: 0 28px;
  background-color: #ff9900;
  color: white;
  border: none;
  border-radius: 0 8px 8px 0;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, box-shadow 0.2s;
  font-weight: 500;
}
.search-box button:hover {
  background: #ffaa00;
  box-shadow: 0 2px 8px rgba(255,153,0,0.18);
}

/* 筛选区域美化 */
.filter-section {
  background-color: #fff;
  padding: 18px 24px;
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  display: flex;
  flex-wrap: wrap;
  gap: 18px 32px;
}

.filter-group {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  min-width: 320px;
  flex: 1 1 320px;
}

.filter-label {
  width: 90px;
  font-size: 15px;
  color: #ff9900;
  font-weight: 500;
  flex-shrink: 0;
}

.el-radio-group {
  flex: 1;
}

.el-radio-button__inner {
  border-radius: 6px !important;
  font-size: 15px;
  padding: 6px 18px;
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: #ff9900 !important;
  border-color: #ff9900 !important;
  color: #fff !important;
}

.price-separator {
  margin: 0 10px;
  color: #bbb;
  font-size: 18px;
}

.el-input-number {
  width: 110px;
}

.sort-group {
  border-top: 1px dashed #eee;
  padding-top: 15px;
  margin-top: 10px;
}

/* 产品列表美化 */
.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  .product-list {
    grid-template-columns: 1fr;
  }
  .filter-section {
    flex-direction: column;
    gap: 12px 0;
  }
  .filter-group {
    min-width: 0;
  }
}

.product-card {
  transition: all 0.3s;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  background: #fff;
}
.product-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 8px 32px rgba(255,153,0,0.12);
  border-color: #ff9900;
}

.product-content {
  display: flex;
  gap: 12px;
}

.image-container {
  width: 200px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}
.product-image {
  width: 100%;
  height: 130px;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.3s;
}
.product-card:hover .product-image {
  transform: scale(1.06);
}

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 4px 0 4px 0;
}

.product-header {
  margin-bottom: 4px;
}

.main-name {
  margin: 0;
  font-size: 17px;
  color: #222;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.sub-name {
  margin: 2px 0 0;
  font-size: 13px;
  color: #ff9900;
  font-weight: 500;
}

.product-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.el-tag {
  font-size: 14px;
  border-radius: 6px;
  padding: 2px 10px;
}

.rating-sales {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #ff9900;
  font-weight: 500;
}

.rating-score {
  font-size: 18px;
  margin-right: 2px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.08);
}

.divider {
  color: #eee;
}

.sales, .reviews {
  position: relative;
  padding-left: 5px;
  color: #888;
}

.sales::before, .reviews::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background-color: #eee;
}

.product-desc {
  margin: 4px 0;
  color: #666;
  line-height: 1.4;
  font-size: 13px;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 2px;
}

.price-container {
  display: flex;
  align-items: baseline;
}

.price {
  font-size: 20px;
}

.price-label {
  font-size: 12px;
}

.book-btn {
  margin-left: 6px;
  padding: 4px 14px;
  font-size: 14px;
}

.pagination {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding: 15px 0;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
}

:deep(.el-pagination.is-background) {
  padding: 0 20px;
}

:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .btn-next),
:deep(.el-pagination.is-background .el-pager li) {
  background-color: #f4f4f4;
  color: #606266;
  min-width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  margin: 0 3px;
  transition: all 0.3s ease;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled):hover) {
  background-color: #fff7e6;
  color: #ff9900;
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
  background-color: #ff9900 !important;
  color: white;
  font-weight: bold;
}

:deep(.el-pagination.is-background .btn-prev:hover),
:deep(.el-pagination.is-background .btn-next:hover) {
  background-color: #fff7e6;
  color: #ff9900;
}

:deep(.el-pagination .el-pagination__jump) {
  margin-left: 16px;
}

:deep(.el-pagination .el-input__inner) {
  height: 32px;
  line-height: 32px;
  border-radius: 6px;
}

:deep(.el-pagination .el-input__wrapper) {
  padding: 0 8px;
  border-radius: 6px;
}

:deep(.el-pagination .el-pagination__total) {
  margin-right: 16px;
}
</style>